
<template>
    <view class="fenduan">
        <uni-segmented-control
                :current="current"
                :values="items"
                @clickItem="onClickItem"
                styleType="button"
                activeColor="#006DFF"
        ></uni-segmented-control>
        <view class="content">
            <view v-show="current === 0">
                <view  class="card1">
                    <uni-row>
                        <uni-col :span="3">
                            <image src="../../static/dengji.png" class="photo"></image>
                        </uni-col>
                        <uni-col :span="21">
                            <view class="zik"></view>
                            <text class="zi">00000000000年春节放假</text>
                        </uni-col>
                    </uni-row>
                    <view class="zi2k">
                        <text class="zi2">
                            假期开始时间：2023-11-16 00:00:00\n
                            假期结束时间：2023-11-16 00:00:00\n
                            时长：26天
                        </text>
                    </view>
                </view>
                <view  class="card1">
                    <uni-row>
                        <uni-col :span="3">
                            <image src="../../static/dengji.png" class="photo"></image>
                        </uni-col>
                        <uni-col :span="21">
                            <view class="zik"></view>
                            <text class="zi">00000000000年春节放假</text>
                        </uni-col>
                    </uni-row>
                    <view class="zi2k">
                        <text class="zi2">
                            假期开始时间：2023-11-16 00:00:00\n
                            假期结束时间：2023-11-16 00:00:00\n
                            时长：26天
                        </text>
                    </view>
                </view>
                <view  class="card1">
                    <uni-row>
                        <uni-col :span="3">
                            <image src="../../static/dengji.png" class="photo"></image>
                        </uni-col>
                        <uni-col :span="21">
                            <view class="zik"></view>
                            <text class="zi">00000000000年春节放假</text>
                        </uni-col>
                    </uni-row>
                    <view class="zi2k">
                        <text class="zi2">
                            假期开始时间：2023-11-16 00:00:00\n
                            假期结束时间：2023-11-16 00:00:00\n
                            时长：26天
                        </text>
                    </view>
                </view>
                <view  class="card1">
                    <uni-row>
                        <uni-col :span="3">
                            <image src="../../static/dengji.png" class="photo"></image>
                        </uni-col>
                        <uni-col :span="21">
                            <view class="zik"></view>
                            <text class="zi">00000000000年春节放假</text>
                        </uni-col>
                    </uni-row>
                    <view class="zi2k">
                        <text class="zi2">
                            假期开始时间：2023-11-16 00:00:00\n
                            假期结束时间：2023-11-16 00:00:00\n
                            时长：26天
                        </text>
                    </view>
                </view>
                <view  class="card1">
                    <uni-row>
                        <uni-col :span="3">
                            <image src="../../static/dengji.png" class="photo"></image>
                        </uni-col>
                        <uni-col :span="21">
                            <view class="zik"></view>
                            <text class="zi">00000000000年春节放假</text>
                        </uni-col>
                    </uni-row>
                    <view class="zi2k">
                        <text class="zi2">
                            假期开始时间：2023-11-16 00:00:00\n
                            假期结束时间：2023-11-16 00:00:00\n
                            时长：26天
                        </text>
                    </view>
                </view>
                <view  class="card1">
                    <uni-row>
                        <uni-col :span="3">
                            <image src="../../static/dengji.png" class="photo"></image>
                        </uni-col>
                        <uni-col :span="21">
                            <view class="zik"></view>
                            <text class="zi">00000000000年春节放假</text>
                        </uni-col>
                    </uni-row>
                    <view class="zi2k">
                        <text class="zi2">
                            假期开始时间：2023-11-16 00:00:00\n
                            假期结束时间：2023-11-16 00:00:00\n
                            时长：26天
                        </text>
                    </view>
                </view>
            </view>
            <view v-show="current === 1">
                <view  class="card1">
                    <uni-row>
                        <uni-col :span="3">
                            <image src="../../static/dengji.png" class="photo"></image>
                        </uni-col>
                        <uni-col :span="21">
                            <view class="zik"></view>
                            <text class="zi">11111111111年春节放假</text>
                        </uni-col>
                    </uni-row>
                    <view class="zi2k">
                        <text class="zi2">
                            假期开始时间：2023-11-16 00:00:00\n
                            假期结束时间：2023-11-16 00:00:00\n
                            时长：26天
                        </text>
                    </view>
                </view>

            </view>
        </view>
    </view>
</template>

<script>
import { ref } from 'vue';
import UniSegmentedControl
    from "../../uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue";
import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row.vue";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";

export default {
    components: {UniCol, UniRow, UniSegmentedControl},
    setup() {
        // 使用ref定义响应式变量
        const items = ['审批通过（999）', '审批不通过（1）'];
        const current = ref(0);

        // 点击事件处理函数
        const onClickItem = (e) => {
            if (current.value !== e.currentIndex) {
                current.value = e.currentIndex;
            }
        };

        return {
            items,
            current,
            onClickItem
        };
    }
};
</script>
<style>
.zi{
    width: 119px;
    height: 22px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #212121;
}
.zik{
    margin-left:10px;
    margin-top: 14px;
}
.zi2{
    width: 203px;
    height: 66px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #5D5E5D;
    line-height: 22px;
}
.zi2k{
    margin-left: 20px;
    margin-top: 6px;
}
.fenduan{
    width: 95%;
    height: 40px;
    background: #FFFFFF;
    border-radius: 4px;
    margin-left: 12px;
    margin-top: 12px;
}
.card1{
    width: 92%;
    height: 124px;
    background-image: linear-gradient(180deg, #E9F1FF 0%, #FFFFFF 100%);
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 10px;
    background-image: url("../../static/bg.png");
    margin-left: 20px;
    margin-top: 20px;
}
.photo{
    width: 22px;
    height: 22px;
    margin-left: 20px;
    margin-top: 14px;
}
</style>